<template>
  <div class="app-container calendar-list-container">
    <basic-container>
      <el-container>
        <!-- 基础信息 -->
        <el-aside class="outAside"
                  width="15%">
          <div class="ataver"
               style="height:50%">
            <div class="activer">
              <el-image style="width: 140px; border-radius:8px; height: 140px"
                        :src="imageUrl">
              </el-image>
              <h2>{{userInfoT.username}}</h2>
              <el-upload class="avatar-uploader"
                         action="#"
                         :http-request='actvierUpload'
                         :show-file-list="false"
                         :before-upload="beforeAvatarUpload">
                <el-button icon="el-icon-upload2"
                           type="link">更换头像</el-button>
              </el-upload>
            </div>
            <div class="iconDiv">
              <div class="el-icon-s-custom">{{userInfoT.positionName}}</div>
              <div class="el-icon-s-home">{{userInfoT.deptName}}</div>
              <div class="el-icon-location">{{userInfoT.location}}</div>
            </div>
          </div>
          <div class="team">
            <h2>团队</h2>
            <div v-for="item in userInfoT.projectTeamList">
              {{item}}
            </div>
          </div>
        </el-aside>
        <el-main>
          <el-tabs class="tabs"
                   v-model="activeName">
            <!-- 基本设置 -->
            <el-tab-pane label="基本设置"
                         name="1">
              <el-form ref="formOne"
                       :rules="rules"
                       :model="form">
                <el-form-item required
                              label="绑定邮箱">
                  <el-input disabled
                            v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item required
                              label="用户名">
                  <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="个人简介">
                  <el-input type="textarea"
                            v-model="form.aboutMe"
                            placeholder="这个人很懒，什么也没有留下"></el-input>
                </el-form-item>
                <el-form-item label="国家地区">
                  <el-select v-model="form.countryId"
                             placeholder="请选择活动区域">
                    <el-option v-for="item of countryList"
                               :label="item.countryName"
                               :key="item.id"
                               :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所在省市">
                  <template v-if="!form.countryId || form.countryId==1">
                    <el-select v-model="form.provinceId">
                      <el-option v-for="(item,index) of provinceList"
                                 :key="index"
                                 :label="item.province"
                                 :value="item.id"></el-option>
                    </el-select>
                    <el-select v-model="form.cityId">
                      <el-option v-for="(item,index) of cityList"
                                 :key="index"
                                 :label="item.city"
                                 :value="item.id"></el-option>
                    </el-select>
                  </template>
                  <template v-if="form.countryId&&form.countryId!=1">
                    <el-input v-model="form.provinceId"
                              placeholder="请输入省份"></el-input>
                    <el-input v-model="form.cityId"
                              placeholder="请输入城市"></el-input>
                  </template>

                </el-form-item>
                <el-form-item label="街道地址">
                  <el-input v-model="form.address"
                            placeholder="这个人很懒，什么也没有留下"></el-input>
                </el-form-item>
                <el-form-item required
                              prop="phone"
                              label="手机电话">
                  <el-input class="number-input"
                            v-model="form.phone"
                            @input="changeInput"
                            :maxlength="11"
                            placeholder="这个人很懒，什么也没有留下"></el-input>
                </el-form-item>
              </el-form>
              <el-button @click="submitForm"
                         type="primary">更新信息</el-button>
            </el-tab-pane>

            <!-- 常用语 -->
            <el-tab-pane label="常用语"
                         name="4">
              <el-container>
                <el-aside style="height:74vh"
                          width="22%">
                  <el-tree default-expand-all
                           highlight-current
                           @node-click='nodeClick'
                           :current-node-key='treeCode[0].children[0].code'
                           :data="treeCode"
                           node-key="code">
                    <span style="width:100%;display:flex;justify-content:space-between;align-items:center;"
                          class="custom-tree-node"
                          slot-scope="{ node, data }">
                      <el-tooltip :enterable="false"
                                  :content="node.label"
                                  placement="top">
                        <span style="width: 100px;overflow: hidden;text-overflow: ellipsis;">{{ node.label }}</span>
                      </el-tooltip>
                      <span>
                        <el-tooltip :enterable="false"
                                    effect="dark"
                                    content="添加常用语"
                                    placement="top">
                          <el-button v-if="data.code"
                                     type="text"
                                     size="mini"
                                     class="el-icon-plus"
                                     @click.stop="newAddCommonexpression(node, data)">
                          </el-button>
                        </el-tooltip>
                      </span>
                    </span>
                  </el-tree>
                </el-aside>
                <el-main style="height:90%">
                  <avue-crud :page='page'
                             @current-change='currentChange'
                             @size-change='sizeChange'
                             :data="tableData"
                             :option="tableOption">
                    <template slot-scope="scope"
                              slot="menu">
                      <el-tooltip :enterable="false"
                                  effect="dark"
                                  content="是否启用"
                                  placement="top">
                        <el-switch style="margin-right:20px"
                                   @change='changeEnabled(scope.row)'
                                   :value="Boolean(scope.row.isEnabled)" />
                      </el-tooltip>
                      <!-- <el-switch
                        v-model="isEnabled"
                        active-text="按月付费"
                        inactive-text="按年付费">
                      </el-switch>-->
                      <el-tooltip :enterable="false"
                                  effect="dark"
                                  content="修改"
                                  placement="top">
                        <el-button type='link'
                                   @click="edittableform(scope)"
                                   icon="el-icon-edit"
                                   size='mini' />
                      </el-tooltip>
                    </template>
                  </avue-crud>
                </el-main>
              </el-container>
            </el-tab-pane>

            <!-- 安全设置 -->
            <el-tab-pane label="安全设置"
                         class="tabPane-Tow"
                         name="2">
              <!-- <basic-container> -->
              <el-card style="margin-bottom:1%"
                       shadow="hover">
                <div class="title-btn">
                  <h4 style="width:60%">账户密码</h4>
                  <el-button style="float: right; padding: 3px 0"
                             @click="passworldShow=true"
                             type="text">修改</el-button>
                </div>
                <div class="text item">
                  当前密码强度 : <span id="passStro"> {{passwordStrengthName}}</span>
                </div>
              </el-card>
              <el-card shadow="hover"
                       style="margin-bottom:1%">
                <div style="margin-bottom:4px">
                  <div>
                    <div class="emailTitle">
                      <h4 style="width:75%">绑定邮箱</h4>
                      <template v-if="userInfoT.email">
                        <el-button style="float: right; padding: 3px 0"
                                   @click.stop="openEmailDia('changeF')"
                                   type="text">修改</el-button>
                        <el-button style="float: right; padding: 3px 0"
                                   @click.stop="openEmailDia('relieveF')"
                                   type="text">解除绑定</el-button>
                      </template>
                      <template v-else>
                        <el-button style="float: right; padding: 3px 0"
                                   @click.stop="openEmailDia('bindingF')"
                                   type="text">绑定邮箱</el-button>
                      </template>
                    </div>
                    <div>
                      已绑定邮箱 :
                      <template v-if="userInfoT.email">
                        {{userInfoT.email}}
                      </template>
                      <template v-else>无</template>
                    </div>
                  </div>
                </div>

              </el-card>
              <el-card style="margin-bottom:1%"
                       shadow="hover">
                <div class="title-btn">
                  <h4 style="width:75%">备用邮箱</h4>
                  <template v-if="userInfoT.emailSpare">
                    <el-button style="float: right; padding: 3px 0"
                               @click.stop="openEmailDia('changeS')"
                               type="text">修改</el-button>
                    <el-button style="float: right; padding: 3px 0"
                               @click.stop="openEmailDia('relieveS')"
                               type="text">解除绑定</el-button>
                  </template>
                  <template v-else>
                    <el-button style="float: right; padding: 3px 0"
                               @click.stop="openEmailDia('bindingS')"
                               type="text">绑定备用邮箱</el-button>
                  </template>
                </div>
                <div class="text item">
                  备用邮箱 :
                  <template v-if="userInfoT.emailSpare">
                    {{userInfoT.emailSpare}}
                  </template>
                  <template v-else>无</template>
                </div>
              </el-card>
            </el-tab-pane>

            <!-- 账号绑定 -->
            <!-- <el-tab-pane class="tabPane-Th"
                         label="账号绑定"
                         name="3">
              <el-card style="margin-bottom:1%"
                       shadow="hover">
                <div class="title-btn">
                  <h4 style="width:60%">绑定企业微信</h4>
                  <el-button style="float: right; padding: 3px 0"
                             type="text">绑定</el-button>
                </div>
                <div style="color: #8F8F8F;"
                     class="text item">
                  当前尚未绑定企业微信账号
                </div>
              </el-card>
              <el-card style="margin-bottom:1%"
                       shadow="hover">
                <div class="title-btn">
                  <h4 style="width:60%"> 绑定飞书</h4>
                  <el-button style="float: right; padding: 3px 0"
                             type="text">绑定</el-button>
                </div>
                <div style="color: #8F8F8F;"
                     class="text item">
                  当前尚未绑定飞书账号
                </div>
              </el-card>
              <el-card style="margin-bottom:1%"
                       shadow="hover">
                <div class="title-btn">
                  <h4 style="width:60%">绑定钉钉</h4>
                  <el-button style="float: right; padding: 3px 0"
                             type="text">绑定</el-button>
                </div>
                <div style="color: #8F8F8F;"
                     class="text item">
                  当前尚未绑定钉钉账号
                </div>
              </el-card>
            </el-tab-pane> -->

            <el-tab-pane label="电子签名"
                         style="width: 98%;"
                         id="text"
                         name="5">
              <div style="display:flex;">
                <p class="demonstration">我的签名</p>
                <el-button v-if="signSrc"
                           style="margin-left:20px;"
                           @click="createdQrcode"
                           type="text">
                  修改
                </el-button>
              </div>
              <template v-if="signSrc">
                <el-image style="width: 300px;cursor:pointer; height: 140px"
                          :preview-src-list="srcList"
                          :src="signSrc">
                </el-image>
              </template>
              <template v-else>
                <div style="cursor:pointer"
                     @click="createdQrcode"
                     class="noPhoto">
                  <i class="el-icon-plus"></i>
                </div>
              </template>
              <div style="margin-top:20px">
                <div>签署密码</div>
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-input v-model="passStr"
                              show-password
                              disabled
                              style="width:100%"></el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="text"
                               @click.stop="chPassword">{{passStr?'修改密码':'设置密码'}}</el-button>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </basic-container>

    <el-dialog title="修改密码"
               :visible.sync="passworldShow"
               width="30%">
      <el-form ref="passworldForm"
               :model="passworldForm"
               :rules="passRule">
        <el-form-item disabled
                      prop="oldPassword"
                      label="原密码">
          <el-input v-model="passworldForm.oldPassword"
                    show-password></el-input>
        </el-form-item>
        <el-form-item disabled
                      prop="newPassword"
                      label="新密码">
          <el-input show-password
                    v-model="passworldForm.newPassword"></el-input>
        </el-form-item>
        <el-form-item disabled
                      prop='confirmPassword'
                      label="确认密码">
          <el-input show-password
                    v-model="passworldForm.confirmPassword"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-tooltip effect="dark"
                    content="确定"
                    placement="top">
          <el-button type="primary"
                     icon="el-icon-check"
                     @click="confirmPass"></el-button>
        </el-tooltip>
        <el-tooltip effect="dark"
                    content="取消"
                    placement="top">
          <el-button @click="passworldShow = false"
                     icon="el-icon-close"></el-button>
        </el-tooltip>
      </span>
    </el-dialog>

    <el-dialog title="设置签名"
               v-if="qrCodeShow"
               :close-on-click-modal='false'
               :close-on-press-escape='false'
               :visible.sync="qrCodeShow"
               width="20%">
      <div class="photoCard">
        <el-image fit='contain'
                  v-loading="serveMessage.headline"
                  style=" height: 250px"
                  :src='qrCodeUrl'></el-image>
        <div v-if="serveMessage.headline"
             class="confrimImg">
          <i class="el-icon-success"></i>
        </div>
        <div v-if="serveMessage.headline">
          {{serveMessage.headline}}
          <el-button @click="againQrcode"
                     type="text"> 重新扫码 </el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 常用语 -->
    <el-dialog :title="title"
               :visible.sync="newAddShow"
               width="30%">
      <el-form ref="passworldForm">
        <el-form-item required
                      label="主题">
          <el-input v-model="tableform.content"
                    type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select disabled
                     v-model="tableform.type">
            <el-option v-for="(item,index) in treeCode[0].children"
                       :key="index"
                       :label="item.label"
                       :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-tooltip effect="dark"
                    content="确定"
                    placement="top">
          <el-button type="primary"
                     icon="el-icon-check"
                     @click="addtableform"></el-button>
        </el-tooltip>
        <el-tooltip effect="dark"
                    content="取消"
                    placement="top">
          <el-button @click="newAddShow = false"
                     icon="el-icon-close"></el-button>
        </el-tooltip>
      </span>
    </el-dialog>

    <!-- 邮箱/备用邮箱 -->
    <emailDialog v-if="emailSpareShow"
                 :emailDialogVisible='emailSpareShow'
                 :emailInfo='emailInfo'
                 :title='titleS'
                 @close="emailSpareShow=false;"
                 @submitEmailEnd='refrshEmail'></emailDialog>

    <!-- 邮箱/备用邮箱 -->
    <passWords v-if="passDialogVisible"
               :passDialogVisible='passDialogVisible'
               :passStr='passStr'
               @submitPassEnd="passDialogVisible=false;"
               @close="passDialogVisible=false;"></passWords>
  </div>
</template>

<script>
import { deepClone } from '../../util/util';
import passWords from './components/passwords';
import { mapGetters } from 'vuex';
import store from '../../store/index';
import * as SockJS from 'sockjs-client';
import Stomp from 'stomp-websocket';
import emailDialog from './components/email';
import {
  uploadPhoto, getUserInfo, creatQrcode,
  changePassword, tableOption, getCountryInfo,
  getCityInfo, getProvinceInfo, changeUserInfo,
  checkCommonexpressionList, getCommonexpressionType,
  addCommonexpression, editCommonexpression, getUserSign,
  idDisable, idEnable,
} from './index.js';
import { validatenum } from '../../util/validate'

export default {
  data () {
    return {
      serveMessage: {},
      passStr: '',
      password: '',
      valueT: Number,
      isEnabled: false,
      emailSpareShow: false,
      qrCodeShow: false,
      passDialogVisible: false,
      tableOption: tableOption(this),
      titleS: '', // 邮箱标题
      qrCodeUrl: '',
      title: '',
      signSrc: '', // 签名链接
      srcList: [],
      emailInfo: {},
      rules: { phone: [{ min: 11, message: '长度不符', trigger: 'change' }] },
      tableData: [],
      id: '',
      tableform: {},
      page: {
        total: '',
        currentPage: '',
        size: 10,
        pageSizes: [10, 50, 100, 300, 500]
      },
      countryList: [],
      cityList: [],
      provinceList: [],
      treeCode: [{
        label: '所有类型',
        children: []
      }],
      imageUrl: '',
      userInfoT: {},
      activeName: '1',
      value: false,
      passworldShow: false,
      newAddShow: false,
      codeShow: false, // 验证码输入状态
      passwordStrengthName: '',
      form: {
        countryId: null,
      },
      passworldForm: {},
      passRule: {
        oldPassword: [{ required: true, message: '请输入', trigger: 'change' }],
        newPassword: [{ required: true, message: '请输入', trigger: 'change' }],
        confirmPassword: [{ required: true, message: '请输入', trigger: 'change' }],
      },
    }
  },
  computed: mapGetters(['userInfo']),
  mounted () {
    this.getUserInfoM();
    this.getCountry();
    getCommonexpressionType().then(res => {
      res.data.data.some(res => {
        this.treeCode[0].children.push({
          label: res.typeName,
          code: res.code,
          enlabel: res.typeNameEn,
        })
      })
      this.$set(this.tableform, 'type', this.treeCode[0].children[0].code);
    })
  },
  watch: {
    'serveMessage.headline': {
      handler () {
        if (!this.serveMessage.headline) return;
        switch (this.serveMessage.headline) {
          case '已取消扫描':
            setTimeout(() => {
              this.qrCodeShow = false;
            }, 2000)
            break;
          case '签名已生成':
            setTimeout(() => {
              this.qrCodeShow = false;
              this.getSign();
            }, 2000)
            break;
        }
      },
      deep: true,
    },
    qrCodeShow: {
      handler () {
        if (!this.qrCodeShow) {
          this.serveMessage = {};
        }
      }
    },
    passworldShow: {
      handler () {
        this.passworldForm = {}
      }
    },
    emailSpareShow: {
      handler () {
        if (!this.emailSpareShow)
          this.emailInfo = {};
      }
    },
    activeName: {
      handler () {
        if (this.activeName == '4') {
          this.getTableList();
        } else if (this.activeName == '5') {
          this.getSign();
        }
      }
    },

    'form.countryId': {
      handler () {
        if (this.form.countryId == 1) {
          getProvinceInfo().then(res => {
            this.provinceList = res.data.data;
          })
        }
      }
    },
    'form.provinceId': {
      handler () {
        if (this.form.provinceId) {
          const query = {
            parentId: this.form.provinceId
          }
          getCityInfo(query).then(res => {
            this.cityList = res.data.data;
            this.form.cityId = this.cityList[0].id;
          })
        }
      },
    },
  },
  methods: {
    changeInput (value) {
      this.form.phone = this.form.phone.split('').map(res => {
        return /[^0-9]/.test(res) ? '' : res
      }).join('')
    },
    chPassword () {
      this.passDialogVisible = true;
    },

    // webScoket 
    initWebSocket () {
      this.connection();
    },
    disconnect () {
      if (this.stompClient != null) {
        this.stompClient.disconnect()
        console.log('Disconnected')
      }
    },
    connection () {
      const token = store.getters.access_token;
      const logUser = this.userInfo;
      const authorization = 'Bearer ' + token;
      const headers = {
        'Authorization': authorization
      }
      // 建立连接对象
      this.socket = new SockJS('/admin/websocket/register');
      // 获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(this.socket)
      this.stompClient.debug = null
      // 向服务器发起websocket连接
      this.stompClient.connect(headers, () => {
        const des = '/user/' + logUser.userId + '/message/pointToPoint/specific';
        // 订阅服务端提供的点对点消息
        this.stompClient.subscribe(des, res => {
          this.serveMessage = JSON.parse(res.body);
        })
      }, (err) => {
        console.log(err);
      })
    },

    getSign () {
      getUserSign().then(res => {
        this.signSrc = res.data.data.signature;
        this.passStr = deepClone(res.data.data.password);
        this.srcList.push(res.data.data.signature);
      })
    }, // 获取当前用户签名
    againQrcode () {
      this.serveMessage = {};
    }, // 重新扫码
    refrshEmail () {
      this.emailSpareShow = false;
      this.getUserInfoM();
      this.getUserInfoM();
    }, // 邮箱
    openEmailDia (sType) {
      switch (sType) {
        case 'changeF': // 修改主邮箱
          this.emailInfo = {
            email: this.userInfoT.email,
            stype: sType,
          };
          this.titleS = '修改主邮箱';
          break;
        case 'relieveF': // 解绑主邮箱
          this.emailInfo = {
            email: this.userInfoT.email,
            stype: '1',
          }
          this.titleS = '解绑主邮箱';
          break;
        case 'bindingF': // 绑定主油箱
          this.emailInfo = {
            stype: sType,
          }
          this.titleS = '绑定主邮箱';
          break;
        case 'changeS':// 修改备用邮箱
          this.emailInfo = {
            email: this.userInfoT.emailSpare,
            stype: sType,
          }
          this.titleS = '修改备用邮箱';
          break;
        case 'relieveS':// 解绑备用邮箱
          this.emailInfo = {
            email: this.userInfoT.emailSpare,
            stype: '1',
          }
          this.titleS = '解绑备用邮箱';
          break;
        case 'bindingS':// 绑定备用油箱
          this.emailInfo = {
            stype: sType,
          }
          this.titleS = '绑定备用油箱';
          break;
      }
      this.emailSpareShow = true;

    },
    createdQrcode () {
      const that = this;
      const query = {
        authorization: `Bearer ${store.getters.access_token}`,
        url: window.location.origin + '/#/sign/index'
      }
      creatQrcode(query).then(res => {
        that.qrCodeUrl = res.data.data;
        if (res.data.meta.success) that.qrCodeShow = true;
        that.initWebSocket();
      })
    }, // 生成二维码

    changeEnabled (data) {
      if (data.isEnabled) {
        idDisable(data.id).then(res => {
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message);
            this.getTableList();
          }
        })
      } else {
        idEnable(data.id).then(res => {
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message);
            this.getTableList();
          }
        })
      }
    },

    edittableform (data) {
      this.title = '修改常用语'
      this.tableform = {};
      this.id = data.row.id;
      this.tableform.typeName = data.row.typeName;
      this.tableform.type = data.row.type;
      this.$set(this.tableform, 'content', data.row.content);
      this.newAddShow = true;
    },
    nodeClick (data) {
      if (!data.code) return;
      this.tableform.type = data.code;
      this.getTableList();
    },
    addtableform () {
      if (!this.tableform.content) {
        this.$message.warning('请输入主题')
        return;
      }
      if (this.id) { // 修改常用语
        const query = {
          ...this.tableform,
          id: this.id,
        }
        editCommonexpression(query).then(res => {
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message);
            this.newAddShow = false;
          }
          this.getTableList();
        })
      } else {
        const query = {
          ...this.tableform
        }
        addCommonexpression(query).then(res => {
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message);
            this.newAddShow = false;
          }
          this.getTableList();
        })
      } // 新增常用语
    },
    newAddCommonexpression (node, data) {
      this.title = '新增常用语'
      this.id = '';
      this.tableform = {};
      this.tableform.typeName = data.label;
      this.tableform.type = data.code;
      this.newAddShow = true;
    },
    currentChange (val) {

    },
    sizeChange (val) {

    },
    getTableList () {
      const query = {
        ...this.tableform,
      }
      checkCommonexpressionList(query).then(res => {
        const tableData = deepClone(res.data.data.records);
        tableData.some(val => {
          switch (val.type) {
            case "decision":
              val.typeName = '决策意见'
              break;
            case "remind":
              val.typeName = "提醒"
              break;
            case "pri_msg":
              val.typeName = "私信"
              break;
            case "notice":
              val.typeName = "系统通知"
              break;
          }
        });
        this.tableData = tableData;
      })
    },
    getCountry () {
      getCountryInfo().then(res => {
        this.countryList = res.data.data;
      })

    }, // 获取国家

    submitForm () {
      this.$refs.formOne.validate((valid) => {
        if (valid) {
          const query = {
            ...this.form
          }
          changeUserInfo(query).then(res => {
            if (res.data.meta.success) this.$message.success(res.data.meta.message);
            this.getUserInfoM();
          })
        }
      })
    }, // 提交表单,修改个人信息

    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJPG) {
        this.$message.error('上传头像图片只能是jpeg/png格式!');
      }
      return isJPG
    }, // 图片格式
    actvierUpload (data) {
      let formData = new FormData();
      formData.append('file', data.file);
      uploadPhoto(formData).then(res => {
        if (res.data.meta.success) {
          this.$message.success(res.data.meta.message);
          this.getUserInfoM();
        }
      })
    }, // 更换图片

    getUserInfoM () {
      // let passStyle = document.getElementById("passStro");
      getUserInfo().then(res => {
        this.userInfoT = deepClone(res.data.data);
        this.imageUrl = this.userInfoT.avatar;
        this.form = deepClone(res.data.data);
        this.valueT = this.form.phone;
        this.$set(this.form, 'phone', res.data.data.phone)
        switch (this.userInfoT.passwordStrength) {
          case 1:
            this.passwordStrengthName = '弱';
            // passStyle.style.color = '#ff7575'
            break;
          case 2:
            this.passwordStrengthName = '中';
            // passStyle.style.color = '#B8C71A'
            break;
          case 3:
            this.passwordStrengthName = '强';
            // passStyle.style.color = '#52C41A'
            break;
        }
      })
    },

    confirmPass () {
      this.$refs.passworldForm.validate((valid) => {
        if (this.confirmPassword !== this.newPassword) {
          this.$message.error('新密码前后输入不一致请重新输入');
          this.confirmPassword = '';
          return;
        }
        let formData = new FormData();
        formData.append('newPass', this.passworldForm.newPassword)
        formData.append('oldPass', this.passworldForm.oldPassword)
        changePassword(formData).then(res => {
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message + ',3秒后退出系统请，重新登录');
            setTimeout(() => {
              this.$store.dispatch('LogOut').then(() => {
                location.reload() // 为了重新实例化vue-router对象 避免bug
              })
            }, 3000);
          }
        })
        this.passworldShow = false;
      })
    },// 更改密码
  },
  components: {
    emailDialog,
    passWords
  }
}
</script>

<style lang="scss" scoped>
.number-input {
  width: 100%;
  /deep/input {
    text-align: left;
  }
}
.block {
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  .el-image {
    width: 70%;
    height: 50%;
    .image-slot {
      width: 100%;
      height: 400px;
      font-size: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.confrimImg {
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
  z-index: 3000;
  i {
    font-size: 1200%;
    color: #4fbd77;
  }
}
.photoCard {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#text {
  /deep/.el-image-viewer__close {
    font-size: 30px;
    color: #ffffff;
  }
}
.emailTitle {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.el-aside {
  border: 1px solid #e0e0e0;
  margin-right: 2%;
  height: 80vh;
}
.title-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.outAside {
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.el-main {
  height: 80vh;
}
.tabPane-Tow,
.tabPane-Th {
  width: 98%;
  // border:1px solid #e0e0e0;
}
.ataver {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.iconDiv {
  width: 100%;
  display: flex;
  flex-direction: column;
  div {
    margin-top: 10px;
  }
}
.team {
  width: 90%;
  border-top: 1px solid #8a8a8a;
  border-style: dashed none none none;
}
/deep/.el-switch__core:after {
  left: unset !important ;
}
.tabs {
  width: 68%;
  // /deep/.el-card {
  // border: 0 0 1px 0 !important;
  // }
}
.noPhoto {
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  border: 1px solid #d8d8d8;
  color: #d8d8d8;
}
</style>